<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>用户管理</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <div th:replace="common/css"></div>
    <link rel="stylesheet" th:href="@{/css/user.css}">
</head>
<body>
<!-- vue入口 -->
<div id="app">
<!-- main -->
<el-main class="app-main">
    <el-card>
        <!-- 功能按钮 -->
        <el-row :gutter="10" type="flex" justify="space-between">
            <el-col :xs="24" :sm="12" :lg="6" :span="5">
                <el-input size="small" v-model="searchEntity.username" placeholder="请输入用户名查询">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6" :span="5">
                <el-input size="small" v-model="searchEntity.age" placeholder="请输入年龄查询">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
            </el-col>
            <el-button @click="search(pageConf.pageCode, pageConf.pageSize)" plain size="small" icon="el-icon-search"></el-button>
            <el-col :xs="24" :sm="12" :lg="6" :span="6">
                <el-button type="primary" plain size="small" @click="search(pageConf.pageCode, pageConf.pageSize)" icon="el-icon-refresh"></el-button>
                <el-button type="primary" plain size="small" @click="handleDelete()" icon="el-icon-delete"></el-button>
                <el-button type="primary" plain size="small" @click="handleSave()" icon="el-icon-plus"></el-button>
            </el-col>
        </el-row>
        <br/>
        <!-- 列表 -->
        <el-table ref="table" @selection-change="selectChange" :data="list" stripe size="mini" border tooltip-effect="dark" style="width: 100%">
            <el-table-column type="selection" width="40" align="center"></el-table-column>
            <el-table-column prop="id" label="编号" width="50" align="center"></el-table-column>
            <el-table-column prop="username" label="用户名" width="200" align="center"></el-table-column>
            <el-table-column prop="password" label="密码" width="200" align="center"></el-table-column>
            <el-table-column prop="age" label="年龄" width="200" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button @click="handleDelete(scope.row.id)" size="mini" icon="el-icon-delete" type="danger"></el-button>
                    <el-button @click="handleSave(scope.row.id)" size="mini" icon="el-icon-edit" type="warning"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <br/>
        <!-- 分页 -->
        <div class="pagination">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="pageConf.pageCode"
                           :page-sizes="pageConf.pageOption"
                           :page-size="pageConf.pageSize"
                           layout="total, sizes, prev, pager, next"
                           :total="pageConf.totalPage">
            </el-pagination>
        </div>
        <br/>
    </el-card>
</el-main>

<!-- 添加-模态框 -->
<div th:replace="user/save"></div>
</div>
<div th:replace="common/js"></div>
<script type="text/javascript" th:src="@{/js/user.js}"></script>
</body>
</html>
